<template>
  <div>
    <table-search
      label-width="80px"
      :search-form="searchFormItem"
      :on-submit="handleQuery"
      :on-reset="handleQuery"
    />
    <el-card>
      <div class="content">
        <table-paging
          :table-list="tableList"
          :table-column="tableColumn"
          :table-paging="tablePaging"
          :table-total="tableTotal"
          :table-btn-width="290"
          @pagingChange="handlePaginChange"
        />
      </div>

      <el-dialog
        v-if="dialogVisible"
        custom-class="mediate-dialog"
        :title="dialogTitle"
        :visible="dialogVisible"
        width="900px"
        :close-on-click-modal="false"
        @close="dialogVisible = false"
      >
        <Reward v-if="activeName === 'first'" :bbs-topic-id="bbsTopicId" />
        <Review v-if="activeName === 'second'" :bbs-topic-id="bbsTopicId" />
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { fetchBbsTopicFindPage, fetchBbsTopicDelete, fetchBbsTopUpdateStatus } from '@/api/basicinfo/bbs/topic'
import { TableSearch, TablePaging } from '@/components'
import Review from './components/review'
import Reward from './components/reward'
import { searchFormItem, tableColumn } from './config'

export default {
  name: 'BbsTopic',
  components: { TableSearch, TablePaging, Review, Reward },
  data() {
    return {
      searchFormItem,
      searchFormData: {},

      tableList: [],
      tableColumn: tableColumn(this.handleDetail, this.handleUpdateStatus, this.handleDelete),
      tableTotal: 0,
      tablePaging: {
        page: 1,
        pagesize: 10
      },

      dialogVisible: false,
      activeName: 'first',

      bbsTopicId: 0
    }
  },
  computed: {
    dialogTitle() {
      return this.activeName === 'first' ? '打赏记录' : '点赞/评论记录'
    }
  },
  created() {
    this.postFindPage()
  },
  methods: {
    handleQuery(values) { // 查询
      this.searchFormData = values
      this.tablePaging = {
        page: 1,
        pagesize: 10
      }
      this.postFindPage()
    },

    handlePaginChange(pageInfo) { // 分页改变
      this.tablePaging = pageInfo
      this.postFindPage()
    },

    handleDetail(e, name) { // 查看详情
      this.bbsTopicId = e
      this.activeName = name
      this.dialogVisible = true
    },

    handleDelete(e) { // 删除
      this.postDelete(e)
    },

    handleUpdateStatus(id) { // 更新状态
      this.postUpdateStatus(id)
    },

    postFindPage() { // 查询数据
      fetchBbsTopicFindPage({ ...this.searchFormData, ...this.tablePaging })
        .then((res) => {
          const { records, current, size, total } = res
          this.tableList = records
          this.tablePaging = {
            page: current,
            pagesize: size
          }
          this.tableTotal = total
        })
    },

    postUpdateStatus(id, status) { // 更新状态
      fetchBbsTopUpdateStatus({ id }).then(() => {
        this.$message.success('操作成功')
        this.postFindPage()
      })
    },

    postDelete(id) { // 删除
      fetchBbsTopicDelete({ id }).then(() => {
        this.$message.success('删除成功')
        this.postFindPage()
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
